import React from 'react';
import {inject, observer} from 'mobx-react';
import {commonStyles} from '../configs/commonStyle';
import {Image, Platform, StyleSheet} from 'react-native';
import {
  NAV_BAR_HEIGHT_ANDROID,
  NAV_BAR_HEIGHT_IOS,
  windowWidth,
} from '../configs/platform';
import BasePage from './BasePage';
import {TouchableOpacity, View} from 'react-native-ui-lib';
import {getStatusBarHeight} from 'react-native-status-bar-height';
import {Icon} from './components';
import {IconImage} from '../utils';
import {CameraScreen} from 'react-native-camera-kit';
import Events from '../utils/events';
import _ from 'lodash';

/**
 * 扫一扫
 */
@inject('userStore', 'appStore')
@observer
export default class ScanQrcodePage extends BasePage {
  constructor(props) {
    logger('ScanQrcodePage');
    super(props);
    this.params = this.props.navigation.state.params;
    this.eventName = this.params.eventName;
    this.backCallback = this.params.backCallback;
    this.throttleTime = this.params.throttleTime || 800;
    this.lastTime = 0;
    this.canScan = true;
    this.state = {
      flashImage: IconImage.ic_light_off,
      flashMode: 'off',
    };
  }

  changeFlashMode = () => {
    const {flashMode} = this.state;
    if (flashMode == 'off') {
      this.setState({flashImage: IconImage.ic_light_on, flashMode: 'on'});
    } else if (flashMode == 'on') {
      this.setState({flashImage: IconImage.ic_light_off, flashMode: 'off'});
    }
    this.camera.onSetTorch();
  };

  // 摄像机识别
  onCameraScreen = event => {
    const result =
      event && event.nativeEvent && event.nativeEvent.codeStringValue;
    logger('识别结果', result);
    if (result) {
      Events.publish(this.eventName, result);
    }
  };

  render() {
    const {flashImage} = this.state;
    return (
      <View useSafeArea style={{flex: 1, backgroundColor: 'black'}}>
        <View flex>
          <CameraScreen
            ref={r => (this.camera = r)}
            scanBarcode
            onReadCode={_.throttle(this.onCameraScreen, this.throttleTime)}
            showFrame={true}
            laserColor={'yellow'}
            frameColor={'white'}
          />
        </View>
        <View useSafeArea style={styles.title}>
          <TouchableOpacity
            style={styles.navBar}
            onPress={() => {
              this._onBackPress();
              this.backCallback && this.backCallback();
            }}>
            <Icon type="AntDesign" name={'left'} color={'white'} size={21} />
          </TouchableOpacity>
          <View row centerV>
            <TouchableOpacity
              style={styles.navBar}
              onPress={this.changeFlashMode}>
              <Image
                source={flashImage}
                style={{width: 21, height: 21, marginLeft: 10}}
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bottomContentView: {
    height: 50,
    flexDirection: 'row',
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    left: 0,
    bottom: 0,
    zIndex: 100,
    width: windowWidth,
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 20,
  },
  desc: {
    backgroundColor: 'rgba(0,0,0,0.5)',
    borderRadius: 2,
    marginTop: 20,
    paddingHorizontal: 20,
    paddingVertical: 5,
  },
  navBar: {
    alignItems: 'center',
    justifyContent: 'center',
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
  },
  title: {
    ...commonStyles.navBar,
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    marginTop: getStatusBarHeight(),
  },
  bottomWrap: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    ...commonStyles.center,
  },
});
